<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <script src="https://unpkg.com/@spritejs/next/dist/spritejs.js"></script>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
      }

      #canvas-wrap {
        height: 100%;
        width: 100%;
      }

      .option {
        color: #00f;
        position: absolute;
        right: 10px;
        top: 10px;
      }

      .option > div {
        cursor: pointer;
        float: right;
        margin: 0 5px;
      }

      .info {
        position: absolute;
        top: 0;
        font-size: 12px;
        background-color: rgba(0, 0, 0, 0.1);
        z-index: 100;
        padding: 10px;
        line-height: 1.8em;
      }
    </style>
  </head>

  <body>
    <div class="info">
      1.黄色块可以拖动，并且该色块可以接收蓝色块的drop事件 <br />
      2.红色块可以拖动，拖动范围为[0,0,300,300],双击画布取消红色拖动 ,取消黄色group的droppable<br />
      3.灰色块可以拖动，并且可以改变自身大小，自身大小的最小值可以受限制 <br />
      4.绿色块能双击以后拖动，双击画布，设置绿色块拖动范围为x>200,y>240 <br />
    </div>
    <div id="canvas-wrap"></div>
    <div class="option">
      <div class="large" id="large">放大</div>
      <div class="small" id="small">缩小</div>
      <div class="rotate" id="rotate">旋转黄色画布</div>
    </div>
    <script src="demo.js"></script>
  </body>
</html>
